<template>
	<div class="dec-deployment-card">
		<div class="dec-deployment-card-header">
			<!-- <div class="icon-add" @click="clickPlus">
				<el-icon color="#8992a5" size="14"><Plus /></el-icon>
			</div>
			<div v-if="showMinus" class="icon-add" @click="clickMinus">
				<el-icon color="#8992a5" size="14"><Minus /></el-icon>
			</div>
			<el-select
				v-if="selectType === 'select'"
				v-model="selectValue"
				:placeholder="placeholder"
				:clearable="true"
				size="large"
				style="width: 290px"
				@change="handleChange"
			>
				<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
			<el-input v-else v-model="selectValue" @input="handleChange" :rows="3" type="textarea" :placeholder="placeholder" />
			<el-input v-model="textValue" @input="handleInput" :rows="3" type="textarea" :placeholder="textPlaceholder" /> -->
		</div>
		<div class="dec-deployment-card-footer flex gap-2">
			<!-- <span><span class="color-danger">* </span>佐证材料（上传佐证材料）： </span> -->
			<el-upload
				v-model:file-list="fileList"
				class="upload-demo"
				:action="baseURL + '/admin/sys-file/upload'"
				:on-change="handleUpload"
				:on-success="handleSuccess"
				:on-remove="handleRemove"
				:headers="headers"
			>
				<el-button type="primary" icon="Upload">上传附件</el-button>
				<template #tip>
					<div class="el-upload__tip">仅支持上传jpg/jpeg/png格式文件，文件不能超过200MB ，图片文件不能超过1MB</div>
				</template>
			</el-upload>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { Session } from '/@/utils/storage';

export default defineComponent({
	name: 'DecDeploymentCard',
	props: {
		placeholder: {
			type: String,
			default: '请输入',
		},
		textPlaceholder: {
			type: String,
			default: '请输入',
		},
		selectType: {
			type: String,
			default: 'select',
		},
		selectOptions: {
			type: Array,
			default: () => [],
		},
		selectVal: {
			type: String,
			default: '',
		},
		textVal: {
			type: String,
			default: '',
		},
		showMinus: {
			type: Boolean,
			default: true,
		},
		id: {
			type: Number,
			default: 1,
		},
		fileUrl: {
			type: String,
			default: '',
		},
		fileName: {
			type: String,
			default: '',
		},
	},
	setup(props, { emit }) {
		const headers = computed(() => {
			return {
				Authorization: 'Bearer ' + Session.get('token'),
				'TENANT-ID': Session.getTenant(),
			};
		});
		const fileList = ref([]);
		const selectValue = ref(props.selectVal);
		const textValue = ref(props.textVal);

		function handleChange(val) {
			emit('leftChange', val);
		}
		function handleInput(val) {
			emit('rightChange', val);
		}
		function clickPlus() {
			emit('clickPlus');
		}
		function clickMinus() {
			emit('clickMinus');
		}
		function handleUpload() {
			emit('uploaded', fileList, props.id);
		}
		function handleSuccess() {
			// emit('uploaded',fileList)
		}
		function handleRemove() {
			emit('uploaded', fileList, props.id);
		}

		watch(
			() => [props.fileUrl, props.fileName],
			(newValue) => {
				if (newValue && newValue[0]) {
					let urlData = newValue[0].split(',');
					let nameData = newValue[1].split(',');
					urlData.forEach((item, index) => {
						fileList.value.push({
							url: item,
							name: nameData[index],
						});
					});
				}
			},
			{ immediate: true }
		);

		return {
			fileList,
			selectValue,
			textValue,
			headers,
			handleChange,
			clickPlus,
			clickMinus,
			handleInput,
			handleUpload,
			handleSuccess,
			handleRemove,
		};
	},
});
</script>

<style scoped lang="scss">
// .dec-deployment-card {
// 	// border: dashed 1px #dcdfe6;
// 	// background-color: #f7f8fa;
// 	// padding: 10px 20px;
// 	// box-sizing: border-box;
// 	// width: 100%;
// 	// display: flex;
// 	// flex-direction: column;
// 	// gap: 20px;
// 	// .dec-deployment-card-header {
// 	// 	display: flex;
// 	// 	align-items: center;
// 	// 	gap: 20px;
// 	// 	.icon-add {
// 	// 		min-height: 20px;
// 	// 		min-width: 22px;
// 	// 		line-height: 18px;
// 	// 		border-radius: 50%;
// 	// 		border: 2px solid #8992a5;
// 	// 		text-align: center;
// 	// 		cursor: pointer;
// 	// 	}
// 	// }
// 	// .dec-deployment-card-footer {
// 	// 	padding: 0 80px;
// 	// 	box-sizing: border-box;
// 	// }
// }
</style>
